<template>
<!-- 
    template在页面上不显示
    template在vue页面中只能有一个
    vue文件画页面必须要有template
    template的下一级只能有一个标签
    template叫做模板占位
 -->
  <div id="app1">
    <!-- 图片变成了base64 
    因为webpack中图片小于一定大小时会自动转base64在浏览器中显示 -->
    <!-- <img src="./assets/logo.png"> -->
    <!-- <router-view/> -->
    {{name}}
    <!-- Vue指令 
    v-model 表单的value进行数据绑定
    v-show 
    v-if
    v-show和 v-if的区别 ：v-if是false时候页面上直接消失  v-show是false页面上是display等于none
    v-else-if
    v-else
    v-for 循环
    -->
    <input type="text"  v-model="name">
    <div v-if="type == 3">连龙不爱说话，要回吹牛皮</div>
    <div v-else-if="type ==2">2</div>
    <div v-else>3</div>
    <div v-show="type == 2">李凤真可爱</div>
    <!-- v-for=(当前每一个对象，下标) in 数组 -->
    <!-- v-for 必须要有key值 key值最好不要是下标 -->
    <div 
        v-for="(objItem , indexItem) in person"
        :key="indexItem"
    >
        <div >{{objItem.name}}</div>
        <ul>
          <li v-for="(item , index) in objItem.type"
          :key="index">
            {{item}}
          </li>
        </ul>
    </div>
    <!-- 事件 v-on:事件函数名="触发的函数" -->
    <!-- 缩写@事件函数名="触发的函数" -->
    <!-- 
      事件冒泡 阻止冒泡
      .self 给父级加 
      .stop 给子级加
     -->
    <!-- <div v-on:click="clickme()">
      点我有惊喜
    </div> -->
    <div @click="clickme()">
      点我有惊喜
        <h1 @click.stop="kanme()"> 砍我爆金币</h1>
    </div>
    <div>{{man}}</div>
    <div @click="shuaige()">点我一下</div>
    <div>
      <!-- v-bind:属性名 就可以让当前的标签属性变成动态属性-->
      <!-- :属性名 就可以让当前的标签属性变成动态属性-->
      <img :src="imgsrc" alt="">
      <div :class="man=='小唐'?red:blue">唐晨萌</div>
    </div>
  </div>
</template>

      <!-- 事件 v-on:事件函数名="触发的函数" -->
      <!-- 缩写 @事件函数名="触发的函数" -->
      <!-- 事件冒泡 阻止冒泡
          给父级加.self
          给子级加.stop
      -->

<script>
export default {
  name: 'App',//vue文件的name的值是vue文件的文件名
  // 因为vue里面name不能重复
  data(){
    return{
      imgsrc:"https://t7.baidu.com/it/u=2405382010,1555992666&fm=193&f=GIF",
      // vue中data是一个函数   用法上相当于小程序的data
      // vue中data为什么是一个函数不是一个对象
      // vue的data其实是Vue prototype（原型）上的属性，数据仍然存在Vue内存中
      // 如果写成对象那么多个vue文件存在于一个页面中data的变量一旦和其他的vuedata变量重复
      // 就会被替换
      // 面试时：为了保证vue文件及组件数据的独立性 必须是函数
      name:"学委真漂亮",
      type:3,
      person:[
        {
            name:"前端",
            type:[
                "页面仔 4-5K",
                "前端开发工程师 9-12K",
                "混合开发工程师 12-18K",
                "大前端 20K+"
            ]
        },{
            name:"后端",
            type:[
                "运维工程师 3-6K",
                "数据库开发工程师 6-10K",
                "JAVA开发工程师 9-13K",
                "大数据开发工程师 15-25K",
                "架构师 20K+"
            ]
        }
      ],
      man:"小唐",
      red:"redcolor",
      blue:"bluecolor"
    }
  },
  methods:{
    // methods是用来专门写函数的
    clickme(){
      alert("1")
    },
    kanme(){
      alert("2")
    },
    shuaige(){
      let _self= this;
      _self.man = "老唐"
    }
  }
}
</script>

<style>
  .redcolor{
    color:red
  }
  .bluecolor{
    color: blue;
  }
</style>
